Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
File Manager
/
examples
:
radial-bar-with-different-bar-positions.html
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Gauge Test</title> <style> body { padding: 0; margin: 0; background: #fff } </style> </head> <body> <button onclick="animateGauges()">Animate</button> <button onclick="stopGaugesAnimation()">Stop animation</button> <hr> <table> <tbody> <tr> <td> <canvas data-type="radial-gauge" data-value="40" data-width="400" data-height="400" data-bar-width="10" data-bar-shadow="5" data-color-bar-progress="rgba(50,200,50,.75)" data-bar-start-position="left"></canvas> </td> <td> <canvas data-type="radial-gauge" data-value="40" data-width="400" data-height="400" data-bar-width="2" data-bar-shadow="0" data-border-inner-width="0" data-border-outer-width="0" data-border-middle-width="0" data-color-bar-progress="rgba(50,50,200,.75)" data-color-bar="#aae" data-color-needle="rgba(50,50,200,.75)" data-color-needle-end="#aae" data-highlights="false" data-value-box-border-radius="0" data-value-box-stroke="1" data-color-value-box-shadow="0" data-needle-type="line" data-needle-width="1" data-needle-circle-size="5" data-needle-circle-inner="false" data-needle-start="0" data-color-needle-circle-outer="rgba(50,50,200,.75)" data-color-needle-circle-outer-end="#aae" data-stroke-ticks="0" data-major-ticks="100,80,60,40,20,0" data-bar-start-position="right"></canvas> </td> <td> <canvas data-type="radial-gauge" data-value="40" data-width="400" data-height="400" data-bar-width="20" data-bar-shadow="1" data-color-bar-progress="rgba(200,50,50,.75)" data-color-bar="#eaa" data-border-shadow-width="0" data-border-inner-width="0" data-border-outer-width="0" data-border-middle-width="0" data-highlights="false" data-value-box-stroke="0" data-color-value-box-shadow="0" data-value-box-border-radius="0" data-value-text-shadow="0" data-color-value-box-background="transparent" data-needle="false" data-bar-start-position="middle"></canvas> </td> </tr> <tr style="text-align: center; font-size: 24px;"> <td> <strong>Clockwise progress bar</strong> </td> <td> <strong>Anti-clockwise progress bar</strong> </td> <td> <strong>Middle start point progress bar</strong> </td> </tr> </tbody> </table> <script async src="../gauge.min.js"></script> <script> if (!Array.prototype.forEach) { Array.prototype.forEach = function (cb) { var i = 0, s = this.length; for (; i < s; i++) { cb && cb(this[i], i, this); } } } document.fonts && document.fonts.forEach(function (font) { font.loaded.then(function () { if (font.family.match(/Led/)) { document.gauges.forEach(function (gauge) { gauge.update(); }); } }); }); var timers = []; function animateGauges() { document.gauges.forEach(function (gauge) { timers.push(setInterval(function () { var min = gauge.options.minValue - 20; var max = gauge.options.maxValue + 20; gauge.value = min + Math.random() * (max - min); }, gauge.animation.duration + 50)); }); } function stopGaugesAnimation() { timers.forEach(function (timer) { clearInterval(timer); }); } </script> </body> </html>